<template>
    <a-form ref="formRef" :model="fields">
        <a-row :gutter="gutter" class="search-fomr-wrap">
            <template v-for="item in searchItemList" :key="item.field">
                <SearchItem 
                v-if="!item.hidden"
                :label="item.label"
                :width="item.width"
                :span="item.span"
                :align="item.align"
                >
                    <!-- input -->
                    <a-form-item :prop="item.field" v-if="item.control === 'input'">
                        <a-input v-model:value="fields[item.field]" :placeholder="item.placeholder || `请输入${item.label}`" />
                    </a-form-item>
                    <!-- select -->
                    <a-form-item :prop="item.field" v-if="item.control === 'select'">
                        <a-select 
                            v-model:value="fields[item.field]" 
                            style="width: 100%" 
                            :mode="item.mode"
                            allowClear
                            :options="item.options"
                            :placeholder="item.placeholder || `请选择${item.label}`"
                        />
                    </a-form-item>
                    <!-- select -->
                    <a-form-item :prop="item.field" v-if="item.control === 'daterange'">
                        <a-range-picker 
                            v-model:value="fields[item.field]" 
                            style="width: 100%;" 
                            :format="item.format || 'YYYY-MM-DD'"
                            :valueFormat="item.format || 'YYYY-MM-DD'"
                            :show-time="false"
                            :placeholder="['开始日期', '结束日期']"
                        />
                    </a-form-item>
                </SearchItem>
            </template>
            <SearchItem :span="modelValue ? toggleSpan[1] : toggleSpan[0]">
                <div class="pull-right">
                    <a-space :size="10">
                        <a-button type="primary" @click="handleSerach">搜索</a-button>
                        <a-button @click="handleReset">重置</a-button>
                        <div @click="toggle" v-if="showToggle">
                            <DownOutlined v-if="modelValue" />
                            <UpOutlined v-else />
                        </div>
                    </a-space>
                </div>
            </SearchItem>
        </a-row>
    </a-form>
</template>
<script setup>
import { provide, watch, ref } from 'vue';
import SearchItem from "./item.vue"
import { SEARCH_FORM_KEY } from "@/constant/index"
// icon
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
// props
import { searchFormProps } from "./props"
const props = defineProps(searchFormProps)
// emits
const emit = defineEmits('search', 'reset')
// 搜索项
const searchItemList = ref([])
const modelValue = defineModel(false)
// formRef
const formRef = ref(null)
/**
 * 搜索
 */
const handleSerach = () => {
    emit('search')
}
/**
 * 重置
 */
const handleReset = () => {
    formRef.value.resetFields()
    emit('reset')
}
/**
 * 切换
 */
const toggle = () => {
    modelValue.value = !modelValue.value
    searchItemList.value.forEach(item => item.isToggle && (item.hidden = !item.hidden))
}
/**
 * 监听
 */
watch(() => props.list, (val) => {
    searchItemList.value = val
}, {
    immediate: true // 初始化监听
})
/**
 * 注入
 */
provide(SEARCH_FORM_KEY, props)
</script>
<style lang="scss" scoped>
.search-fomr-wrap {
    row-gap: 16px;
}
:deep(.search-fomr-wrap) {
    .ant-form-item { margin-bottom: 0; }
}
</style>